import React, { useCallback, useEffect, useState } from 'react';
import { Layout, Menu, Row, Col, Breadcrumb, Dropdown } from 'antd';
import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { logout } from '@/redux/actions/user'
import SvgIcon from "@/components/SvgIcon";
import Dashboard from '../subject/dashboard/Dashboard';
import AdminManage from '../subject/adminManage/AdminManage';
import BuildingManage from '../subject/buildingManage/BuildingManage';
import FloorManage from '../subject/floorManage/FloorManage';
import RoomInfo from '../subject/roomInfo/RoomInfo';
import StudentsInfo from '../subject/studentsInfo/StudentsInfo';
import RecordManage from '../subject/recordManage/Default';
import Profile from '../subject/profile/Profile';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    DownOutlined,
} from '@ant-design/icons';
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
function SuperAdmin(props) {
    // 菜单收放
    const [collapsed, setCollapsed] = useState(false);
    const toggle = useCallback(() => {
        setCollapsed(pre => !pre)
    }, []);
    // 菜单内容
    const menuArr = [
        {
            path: '/dashboard',
            text: '概览',
            icon: <SvgIcon iconClass="dashboard" />
        },
        {
            path: '/adminManage',
            text: '管理员管理',
            icon: <SvgIcon iconClass="edit" />
        },
        {
            path: '/buildingManage',
            text: '宿舍楼管理',
            icon: <SvgIcon iconClass="international" />
        },
        {
            path: '/floorManage',
            text: '楼层管理',
            icon: <SvgIcon iconClass="list" />
        },
        {
            path: '/roomInfo',
            text: '宿舍信息',
            icon: <SvgIcon iconClass="peoples" />
        },
        {
            path: '/studentsInfo',
            text: '学生信息',
            icon: <SvgIcon iconClass="people" />
        },
        {
            path: '/recordManage',
            text: '记录查看',
            icon: <SvgIcon iconClass="tree" />,
            children: [
                {
                    path: '/getup',
                    text: '起床记录'
                }, {
                    path: '/back',
                    text: '归宿记录'
                }, {
                    path: '/clean',
                    text: '清扫记录'
                }
            ]
        }
    ];
    //面包屑内容
    const [breadcrumb, setBreadcrumb] = useState([]);
    //面包屑导航名字
    const pathName = {
        'dashboard': '概览',
        'adminManage': '管理员管理',
        'buildingManage': '宿舍楼管理',
        'floorManage': '楼层管理',
        'roomInfo': '宿舍信息',
        'studentsInfo': '学生信息',
        'recordManage': '记录查看',
        'getup': '起床记录',
        'back': '归宿记录',
        'clean': '清扫记录',
        'profile': '个人中心'
    }
    const baseUrl = props.match.path;
    const [menu] = useState(menuArr);
    //点击菜单路由跳转
    const changeMenu = useCallback(({ item, key, keyPath, domEvent }) => {
        setBreadcrumb(key.replace('/', '').split('/'));
        props.history.push(key);
    }, []);
   
    useEffect(() => {
        setBreadcrumb(props.location.pathname.replace('/', '').split('/').splice(1));
        //路由监听
        props.history.listen(location => {
            setBreadcrumb(location.pathname.replace('/', '').split('/').splice(1));    
            
           
        })
      
    }, []);
    //退出登录
    const signOut = useCallback(() => {
        props.logout();
        props.history.push('/login');
    }, [])
    //个人中心跳转
    const goToProfile = useCallback(() => {
        props.history.push(baseUrl + '/profile');
    }, [])
    return (
        <div className='superAdmin'>
            <Layout>
                <Sider trigger={null} collapsible collapsed={collapsed} >
                    <div className="logo" >
                        <img src="https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png" alt="" className="sidebar-logo" />
                        <h1 className="sidebar-title">宿舍可视化系统</h1>
                    </div>
                    <Menu
                       selectedKeys={[props.location.pathname]}
                        mode="inline"
                        theme="dark"
                        onClick={changeMenu}
                    >
                        {
                            menu.map(item1 => {
                                return (
                                    !item1.children ?
                                        <Menu.Item key={baseUrl + item1.path} icon={item1.icon}>
                                            {item1.text}
                                        </Menu.Item>
                                        :
                                        <SubMenu key={baseUrl + item1.path} title={item1.text} icon={item1.icon}>
                                            {
                                                item1.children.map(item2 => {
                                                    return (<Menu.Item key={baseUrl + item1.path + item2.path}>{item2.text} </Menu.Item>)
                                                })
                                            }
                                        </SubMenu>
                                )
                            })
                        }
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background">
                        <Row>
                            <Col span={1}>
                                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                    className: 'trigger',
                                    onClick: toggle,
                                    style: { fontSize: 18, height: '100%', lineHeight: '50px', padding: "0 15px", display: 'block' }
                                })}
                            </Col>
                            <Col span={21}>
                                <Breadcrumb style={{ lineHeight: '50px' }}>
                                    {
                                        breadcrumb.map(item => {
                                            return (
                                                <Breadcrumb.Item key={item}>
                                                    {
                                                        pathName[item] ? pathName[item] : ''
                                                    }
                                                </Breadcrumb.Item>
                                            )
                                        })
                                    }
                                </Breadcrumb>
                            </Col>
                            <Col span={2} style={{ height: '50px' }}>
                                <Dropdown overlay={
                                    <Menu>
                                        <Menu.Item key="0" onClick={goToProfile}>
                                            个人中心
                                        </Menu.Item>
                                        <Menu.Divider />
                                        <Menu.Item key="1" onClick={signOut}>
                                            退出
                                        </Menu.Item>
                                    </Menu>} trigger={['click']}>
                                    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                                        <img src="http://study.esunr.xyz/1582549904311.png?imageView2/1/w/80/h/80" alt="" width="40" height="40" />
                                        <DownOutlined style={{ marginLeft: '10px' }} />
                                    </a>

                                </Dropdown>
                            </Col>
                        </Row>
                    </Header>
                    <Content
                        className="site-layout-background"
                    >
                        <Switch>
                            <Route path={baseUrl + '/dashboard'} component={Dashboard} ></Route>
                            <Route path={baseUrl + '/adminManage'} component={AdminManage}></Route>
                            <Route path={baseUrl + '/buildingManage'} component={BuildingManage}></Route>
                            <Route path={baseUrl + '/floorManage'} component={FloorManage}></Route>
                            <Route path={baseUrl + '/roomInfo'} component={RoomInfo}></Route>
                            <Route path={baseUrl + '/studentsInfo'} component={StudentsInfo}></Route>
                            <Route path={baseUrl + '/recordManage'} component={RecordManage}>

                            </Route>
                            <Route path={baseUrl + '/profile'} component={Profile}></Route>

                            <Redirect to={baseUrl + '/dashboard'}></Redirect>
                        </Switch>
                    </Content>
                </Layout>
            </Layout>
        </div >
    )
}
SuperAdmin = withRouter(SuperAdmin);
export default connect(null, { logout })(SuperAdmin);
